import React from "react";
import Chart from 'bizcharts/lib/components/Chart';
import Geom from 'bizcharts/lib/components/Geom';
import Tooltip from 'bizcharts/lib/components/Tooltip';
import Axis from 'bizcharts/lib/components/Axis';
import {connect} from 'dva';

@connect(
  ({
     dashboardWorkplace: {
       yearExportvolumeData,
     },
     loading,
   }: {
    dashboardWorkplace: ModalState;
    loading: { effects: any };
  }) => ({
    yearExportvolumeData
  }),
)
class ExportVolumeChart extends React.Component {
  render() {
    const {yearExportvolumeData} = this.props;
    const row = yearExportvolumeData[0];

    const data = [
      {
        month: "1月",
        value: row ? row['1m'] : 0,
      },
      {
        month: "2月",
        value: row ? row['2m'] : 0,
      },
      {
        month: "3月",
        value: row ? row['3m'] : 0,
      },
      {
        month: "4月",
        value: row ? row['4m'] : 0,
      },
      {
        month: "5月",
        value: row ? row['5m'] : 0,
      },
      {
        month: "6月",
        value: row ? row['6m'] : 0,
      },
      {
        month: "7月",
        value: row ? row['7m'] : 0,
      },
      {
        month: "8月",
        value: row ? row['8m'] : 0,
      },
      {
        month: "9月",
        value: row ? row['9m'] : 0,
      },
      {
        month: "10月",
        value: row ? row['10m'] : 0,
      },
      {
        month: "11月",
        value: row ? row['11m'] : 0,
      },
      {
        month: "12月",
        value: row ? row['12m'] : 0,
      }
    ];

    const cols = {
      value: {
        min: 0
      },
      month: {
        range: [0, 1]
      }
    };

    return (

      <div>
        <Chart height={400} data={data} scale={cols} forceFit>
          <Axis name="month"/>
          <Axis name="value"/>
          <Tooltip

            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="month*value" size={2}/>
          <Geom
            type="point"
            position="month*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}

export default ExportVolumeChart;
